<template>
	<view class="content">
		<div class="swiperDiv">
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				@change="change" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item">
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
			<swiper-dot class="dot" :current="current" :list="info"></swiper-dot>
		</div>
		<div class="bot-msg">
			<div class="bot-msg-jzr">
				<uni-row>
					<uni-col :span="6">
						<div class="colDiv tCenter">
							<image src="../../static/head.png" mode="" class="head"></image>
						</div>
					</uni-col>
					<uni-col :span="12">
						<div class="colDiv jzr">
							<div class="userName">
								就诊人：王野
							</div>
							<div>
								就诊ID：12122211
							</div>
						</div>
					</uni-col>
					<uni-col :span="6">
						<div class="colDiv btn"><button class="mini-btn" type="primary" size="mini"
						@click="colDiv"
						>
								<image src="../../static/index/user.png" mode="" class="user"></image>
								切换
							</button></div>
					</uni-col>
				</uni-row>
				<div class="checkbox" @click="checkbox">
					<image src="../../static/index/check.png" mode="" class="check"></image>
					<span>查看详情</span>
				</div>
			</div>
			<div class="bot-msg-btn">
				<uni-row :gutter="20">
					<uni-col :span="8">
						<div class="block bgc1" @click="register">
							<div>
								<image src="../../static/index/bock1.png" mode="" class="bockImg"></image>
								<div class="bockText">预约挂号</div>
							</div>

						</div>
					</uni-col>
					<uni-col :span="8">
						<div class="block bgc2" @click="bock">
							<div>
								<image src="../../static/index/bock2.png" mode="" class="bockImg"></image>
								<div class="bockText">检查预约</div>
							</div>

						</div>
					</uni-col>
					<uni-col :span="8">
						<div class="block bgc3" @click="bock">
							<div>
								<image src="../../static/index/bock3.png" mode="" class="bockImg"></image>
								<div class="bockText">接诊结算</div>
							</div>

						</div>
					</uni-col>
				</uni-row>
				<div style="margin-top: 20rpx;">
					<uni-row :gutter="20">
						<uni-col :span="8">
							<div class="block bgc4" @click="bock">
								<div>
									<image src="../../static/index/bock4.png" mode="" class="bockImg"></image>
									<div class="bockText">报告单查询</div>
								</div>

							</div>
						</uni-col>
						<uni-col :span="8">
							<div class="block bgc5" @click="bock">
								<div>
									<image src="../../static/index/bock5.png" mode="" class="bockImg"></image>
									<div class="bockText">住院缴费</div>
								</div>

							</div>
						</uni-col>
						<uni-col :span="8">
							<div class="block bgc6" @click="bock">
								<div>
									<image src="../../static/index/bock6.png" mode="" class="bockImg"></image>
									<div class="bockText">住院明细</div>
								</div>

							</div>
						</uni-col>
					</uni-row>
				</div>
				<div style="margin: 20rpx 0rpx" @click="bock">
					<uni-row :gutter="20">
						<uni-col :span="8">
							<div class="block bgc7">
								<div>
									<image src="../../static/index/bock7.png" mode="" class="bockImg"></image>
									<div class="bockText">接诊医生</div>
								</div>

							</div>
						</uni-col>
					</uni-row>
				</div>
			</div>
		</div>
	</view>

</template>

<script>
	import swiperDot from '@/components/swiperDot/swiperDot.vue';
	export default {
		components: {
			swiperDot
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 3000, //切换的间隔时间
				duration: 500, //滑动动画时长
				current: 0,
				info: [{
						url: '../../static/index/1.png',

					},
					{
						url: '../../static/index/2.png',

					},
					{
						url: '../../static/index/3.png',

					}
				],

			}
		},
		onLoad() {
			// 登录鉴权
			// if (!this.$common.isLogin()) {
			// 	this.$common.show('提示', '登录已过期，请授权登录', false, '确定').then(res => {
			// 		this.$common.redirectTo("/pages/login/login")
			// 	})
			// }
		},
		methods: {
			
			bock(){
				this.$common.msg("该功能尚未开放")
			},
			// 预约挂号
			register(){
				this.$common.navigateTo("/pages/register/index")
			},
			// 查看详情
			checkbox(){
				this.$common.navigateTo("/pages/card/check")
			},
			// 切换就诊人
			colDiv(){
				this.$common.navigateTo("/pages/card/list")
			},
			// 自定义轮播会指示点
			change(e) {
				this.current = e.detail.current;
			}
		},
		mounted() {

		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: relative;
		height: 100%;
		background-color: #fff;
		overflow-x: hidden;

	}

	.swiperDiv {
		height: 500rpx;
		background-color: #1648ce;
	}

	.swiper-box {
		width: 105%;
		height: 320rpx;
		position: absolute;
		left: -33rpx;
		top: 10rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin: 20rpx 15rpx;
		border-radius: 20rpx;

	}

	.image {
		height: 300rpx;
		width: 100%;
		border-radius: 20rpx;
	}

	.dot {
		position: absolute;
		top: 330rpx;
	}

	.bot-msg {
		position: absolute;
		top: 360rpx;
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		border-top-right-radius: 70rpx
	}

	.bot-msg-jzr {
		width: 94%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 60rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border: 4rpx solid #1648CE;

		.colDiv {
			margin-top: 40rpx;
		}

		.head {
			width: 112rpx;
			height: 112rpx;

		}

		.user {
			width: 32rpx;
			height: 32rpx;
			margin-bottom: 4rpx;
			vertical-align: middle;
		}

		.jzr {
			font-size: 34rpx;
			font-weight: 500;
			color: #112950;

			.userName {
				margin-bottom: 20rpx;
			}
		}

		button {
			padding-left: 16rpx;
			padding-right: 20rpx;
		}

		.checkbox {
			width: 100%;
			height: 84rpx;
			color: #fff;
			text-align: center;
			margin-top: 36rpx;
			line-height: 84rpx;
			font-size: 28rpx;
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
			background-color: #1648CE;

			.check {
				width: 32rpx;
				height: 32rpx;
				margin-bottom: 6rpx;
				margin-right: 6rpx;
				vertical-align: middle;
			}
		}

	}

	.bot-msg-btn {
		width: 94%;
		margin: 0 auto;
		margin-top: 20rpx;

		.block {
			width: 100%;
			height: 180rpx;
			display: grid;
			place-items: center;
			/* 简写，同时居中水平和垂直 */
			text-align: center;
			border-radius: 40rpx;
		}

		.bgc1 {
			background-color: #E4F7F8;
		}

		.bgc2 {
			background-color: #EBE9FE;
		}

		.bgc3 {
			background-color: #F1EFE6;
		}

		.bgc4 {
			background-color: #F2E4F8;
		}

		.bgc5 {
			background-color: #F9ECF1;
		}

		.bgc6 {
			background-color: #E9F5FE;
		}

		.bgc7 {
			background-color: #F1E6E7;
		}

		.bockImg {
			width: 64rpx;
			height: 64rpx;
		}

		.bockText {
			color: #091F44;
			font-size: 28rpx;
			font-weight: 600;
		}

		.uni-col-8 {
			margin-top: 20rpx;
		}
	}

	button[type=primary] {
		background-color: #1648CE;
	}
</style>